import {useSearchParams} from '@@/exports';
import {useEffect, useState} from 'react';
import styles from './meetingRemind.less';
import {Button} from "antd";
import SVG from "react-inlinesvg";

const MeetingRemind = () => {
    const [searchParams] = useSearchParams();
    console.log("searchParams", searchParams.getAll('meetingRemindData'))
    const [meetingRemindData] = searchParams.getAll('meetingRemindData');

    const [remindData, setRemindData] = useState<{
        messageType: string;
        userId: string;
        meetingCode: string;
        meetingName: string;
        appointStartTime: string;
        userName: string;
        avatar: string;
        leadTime: string;
        isCreateUser: boolean;
    }>();

    useEffect(() => {
        console.log('-----------------meetingRemindData:', JSON.parse(meetingRemindData));
        const meetingRemindInfo = JSON.parse(meetingRemindData);
        if (
            meetingRemindInfo.avatar === null ||
            meetingRemindInfo.avatar === '' ||
            meetingRemindInfo.avatar === 'null'
        ) {
            meetingRemindInfo.avatar = '/img/user.png';
        }
        console.log("meetingRemindInfo",meetingRemindInfo)
        setRemindData(meetingRemindInfo);
    }, []);

    const refuseAnswer = async () => {
        console.log("refuseAnswer")
        window.tm!.ipcRenderer.send('close-meetingRemind', {});
    };

    return (
        <div className={styles.bodyDiv}>
            <div className={styles.contentDiv}>
                <div className={styles.meetingMessage}>
                    <SVG className={styles.iconSvg} src={"/img/meeting/remind-fill.svg"}/>
                    <span className={styles.meetingSpan}>会议提醒</span>
                </div>
                <div className={styles.meetingInfo}>
                    <div className={styles.rowDiv}>
                        {
                            remindData?.isCreateUser ?
                                <span className={styles.meetingLeadTime}>即将开始</span>
                                :
                                <span className={styles.meetingLeadTime}>{remindData?.leadTime}分钟后</span>
                        }
                        <span className={styles.meetingName}>{remindData?.meetingName}</span>
                    </div>
                    <div className={styles.rowDiv}>
                        <SVG className={styles.iconSvg} src={'/img/meeting/time.svg'}/>
                        <span className={styles.meetingSpan}>{remindData?.appointStartTime}</span>
                    </div>
                    <div className={styles.rowDiv}>
                        <SVG className={styles.iconSvg} src={'/img/meeting/video.svg'}/>
                        <span className={styles.meetingSpan}>会议号:</span>
                        <span className={styles.meetingSpan}>{remindData?.meetingCode}</span>
                    </div>
                    <div className={styles.rowDiv}>
                        <SVG className={styles.iconSvg} src={'/img/meeting/customer.svg'}/>
                        <span className={styles.meetingSpan}>{remindData?.userName}</span>
                    </div>
                </div>
                <div className={styles.buttonDiv}>
                    {
                        remindData?.isCreateUser && <Button className={styles.meetingButton} onClick={() => {
                            window.tm!.ipcRenderer.send(
                                'openMeet',
                                'pullStream',
                                remindData?.meetingCode,
                                remindData?.meetingName,
                            );
                        }}>进入会议</Button>
                    }
                    <Button className={styles.meetingButton} onClick={refuseAnswer}>我知道了</Button>
                </div>
            </div>
        </div>
    );
};

export default MeetingRemind;
